<!-- 点加号对应的菜单 -->
<template>
  <v-contextmenu ref="contextMenuRef">
    <v-contextmenu-item>
      <div class="contextmenu-item">播放队列</div>
    </v-contextmenu-item>
    <template v-if="sheetList.length">
      <v-contextmenu-item
        v-for="item in sheetList"
        :key="item.key"
        :disabled="beToList.includes(item.key)"
      >
        <div class="contextmenu-item" @click="addSheetSong(item.key)">
          {{ item?.title }}
        </div>
      </v-contextmenu-item>
    </template>
  </v-contextmenu>
</template>
<script lang="ts" setup>
  import { ref, inject } from 'vue'
  import { addSong } from '@/api/sheet'
  import { getSongBeToSheet } from '@/api/song'
  import { ElMessage } from 'element-plus'
  import { useStore } from 'vuex'
  import { onClickOutside } from '@vueuse/core'
  // eslint-disable-next-line no-undef
  defineOptions({
    name: 'AddContextMenu'
  })
  const sheetList = inject<any>('sheetList')

  const props = defineProps<{
    item: any
  }>()
  interface EventClient {
    top: number
    left: number
  }
  const store = useStore()
  const beToList = ref<any>([])
  const contextMenuRef = ref<any>(null)
  const show = (data: EventClient) => {
    contextMenuRef.value.show(data)
    beToList.value = []
    getSongBeToSheet({
      userId: store.state.userInfo.userId,
      songId: props.item.id
    }).then(res => {
      beToList.value = res
    })
  }

  onClickOutside(contextMenuRef, () => contextMenuRef.value.hide())

  // 将歌曲添加至歌单中
  const addSheetSong = (key: number) => {
    console.log(beToList.value + '<=====>' + key)
    if (beToList.value.includes(key)) return
    addSong({
      sheetId: key,
      songId: props.item.id
    }).then(() => {
      ElMessage({
        message: '成功添加一首歌曲',
        type: 'success'
      })
    })
  }

  defineExpose({
    show
  })
</script>

<style lang="scss" scoped>
  .contextmenu-item {
    width: 110px;
    height: 22px;
    line-height: 22px;
  }
</style>
